<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>搜索功能</title>
  <script src="../js/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
  <style>
    .content1 {
      width: 90%;
      height: 600px;
text-align: center;
      display: inline-block;
      margin-top: 20px;
      margin-left: 50px;
    }

    .content2 {
      width: 600px;
      height: 600px;
      display: inline-block;

      margin-top: 50px;
      margin-left: 100px;

    }



    #lin {
      margin: 20px 0;
      height: 30px;
      padding: 5px;
      box-sizing: border-box;
    }

    .names {
      width: 300px;
      margin-bottom: 30px;
    }
    .content3 {
      margin-top: 50px;
      margin-left: 100px;
      
    }
    .content3 ul {
      padding-left: 0;
      margin-bottom: 100px;
    }
    .content3 ul li{
      list-style: none;
    }
  </style>
</head>

<body>



  <div class="content1">
    <!-- <input type="text" id="lin" placeholder="请输入需要搜索的内容"> -->
    <input type="text" class="form-control names" id="lin" placeholder="请输入需要搜索的内容">

    <table class="table table-striped table-bordered" id="table-1">
      <thead class="thead-dark">
        <tr>
          <th>教师工号</th>
          <th>教师姓名</th>
          <th>性别</th>
          <th>专业</th>
          <th>职称</th>
          <th>出生日期</th>
          <th>电话号码</th>
          <th>备注</th>
        </tr>
      </thead>

      <tbody id="aaa">
        <!-- 模板1 -->
        <tr style="display: none;">
          <td>100001</td>
          <td>歆瑶</td>
          <td>女</td>
          <td>计算机</td>
          <td>博导</td>
          <td>1989-10</td>
          <td>185****4586</td>
          <td></td>
        </tr>
        <!-- 模板2 -->
        <tr style="display: none;">
            <td>20230119</td>
            <td>佩儒</td>
            <td>男</td>
            <td>通信</td>
            <td>教授</td>
            <td>1986-05</td>
            <td>185****4556</td>
            <td></td>
        </tr>
      </tbody>
    </table>
  </div>
<script>
        let user = ["刘", "张", "王", "李", "彭", "朴", "苍"];
        let user2 = ["雁卉", "凝冬", "幻露", "雁露", "觅儿", "盼香", "你竹", "访文", "冰双", "静珊", "沁雪", "小影", "琼琚"];
        let sex=["男","女"];
        let zy=["计算机","通信","化工","建筑","电子","电控","音乐","舞蹈"];
        let zc=["教授","副教授","研究员","高级讲师","讲师","助教"]
        $(function(){
            for (let i = 2; i < 100; i++) {
                let x = user[Math.round(Math.random() * 6)];
                let m = user2[Math.round(Math.random() * 12)];
                
                if (i % 2 == 0) {
                    $("#aaa tr:eq(0) td:first").html("2023000"+i);
                    $("#aaa tr:eq(0) td:eq(1)").html(x + "" + m);
                    $("#aaa tr:eq(0) td:eq(2)").html(sex[Math.round(Math.random() * 2)]);
                    $("#aaa tr:eq(0) td:eq(3)").html(zy[Math.round(Math.random() * 8)]);
                    $("#aaa tr:eq(0) td:eq(4)").html(zc[Math.round(Math.random() * 6)]);
                    $("#aaa tr:eq(0) td:eq(5)").html("19"+Math.round(Math.random()*9)+""+Math.round(Math.random()*9)+"-0"+Math.round(Math.random()*9));
                    $("#aaa tr:eq(0) td:eq(6)").html("1"+Math.round(Math.random()*9)+"5****"+Math.round(Math.random()*9)+""+Math.round(Math.random()*9)+""+Math.round(Math.random()*9)+Math.round(Math.random()*9));
                    $("#aaa tr:eq(0)").clone().removeProp("style").appendTo("#aaa:last")
                } else {
                    $("#aaa tr:eq(1) td:first").html("2023000"+i);
                    $("#aaa tr:eq(1) td:eq(1)").html(x + "" + m);
                    $("#aaa tr:eq(1) td:eq(2)").html(sex[Math.round(Math.random() * 2)]);
                    $("#aaa tr:eq(1) td:eq(3)").html(zy[Math.round(Math.random() * 8)]);
                    $("#aaa tr:eq(1) td:eq(4)").html(zc[Math.round(Math.random() * 6)]);
                    $("#aaa tr:eq(1) td:eq(5)").html("19"+Math.round(Math.random()*9)+""+Math.round(Math.random()*9)+"-0"+Math.round(Math.random()*9));
                    $("#aaa tr:eq(1) td:eq(6)").html("1"+Math.round(Math.random()*9)+"5****"+Math.round(Math.random()*9)+""+Math.round(Math.random()*9)+""+Math.round(Math.random()*9)+Math.round(Math.random()*9));
                    $("#aaa tr:eq(1)").clone().removeProp("style").appendTo("#aaa:last")
                }
            }
        })
</script>

  <div class="content2" style="display: none;">

    <select class="form-control names" id="select">
      <option>请选择地址</option>
      <option>富顺</option>
      <option>南充</option>
      <option>广元</option>
      <option>江安</option>
      <option>成都</option>
      <option>内江</option>
    </select>
    <table class="table table-striped table-bordered" id="table-2">
      <thead class="thead-dark">
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td>林兵</td>
          <td>男</td>
          <td>18</td>
          <td>12345678941</td>
          <td>富顺</td>
        </tr>
        <tr>
          <td>赖玉英</td>
          <td>女</td>
          <td>18</td>
          <td>12345678942</td>
          <td>南充</td>
        </tr>
        <tr>
          <td>潘旭</td>
          <td>女</td>
          <td>20</td>
          <td>12345678912</td>
          <td>富顺</td>
        </tr>
        <tr>
          <td>王威平</td>
          <td>男</td>
          <td>20</td>
          <td>97543152146</td>
          <td>广元</td>
        </tr>
        <tr>
          <td>李丹</td>
          <td>女</td>
          <td>30</td>
          <td>14725836910</td>
          <td>江安</td>
        </tr>
        <tr>
          <td>陈志樑</td>
          <td>男</td>
          <td>20</td>
          <td>31546287451</td>
          <td>富顺</td>
        </tr>
        <tr>
          <td>郭仕宏</td>
          <td>男</td>
          <td>20</td>
          <td>51240316845</td>
          <td>南充</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="content3" style="display: none;">
    <input type="text" class="form-control names" id="searchInput" placeholder="请输入需要搜索的内容">

    <ul class="ul">
      <li>死亡如风，常伴吾身。</li>
      <li>蠢货是无药可治的！</li>
      <li>想杀我？你可以试试。</li>
      <li>死亡而已，没什么大不了的。</li>
      <li>速战速决！</li>
      <li>还是别出招了，反正是我赢。</li>
      <li>想独自平静一会吗？很快你就可以了。</li>
      <li>有些事绝对不会无趣。</li>
      <li>有些失误无法犯两次。 我不会怀着耻辱而死！</li>
      <li> 别再逃了。 我命由我，不由天。 一剑，一念。 还没到死的时候。</li>
      <li>长路漫漫 惟剑做伴 吾之荣耀 离别已久 宁日安在 无人能云 且随疾风前行 身后一许流星 此剑之势 愈斩愈烈 仁义道德</li>
    </ul>
  </div>

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
  <script src="../js/lin_search.js"></script>
  <script>
    //  表1


    $("#lin").on('keyup', function () {
      var table1 = $("#table-1");
      var input = $(this);
      new Search(table1, input,)

    })


    // 表2
    $('#select').on('change', function () {
      var content = $('#select') // 下拉框
      var table2 = $('#table-2')
      new Search(table2, content, '#6332f6')
    })

    // 搜索ul li
    $('#searchInput').on('keyup', function () {
      var content = $('.ul') // 
      var input = $(this)
      new Search(content, input, '#6332f6')
    })



  </script>




</body>

</html>